<div id="debugpanelc" rel="hide">
	<div id="debugpanel">
		<ul class="buttons">
			<li style="background-image:url('{$ap}/bullet_white.png');" class="passive">Notices</li>
			<li style="background-image:url('{$ap}/bullet_yellow.png');" class="passive">Warnings</li>
			<li style="background-image:url('{$ap}/bullet_red.png');">Errors</li>
			<li style="background-image:url('{$ap}/database.png');">Queries</li>
		</ul>
		<div id="debugpanelic">
			<ul>
				{include file=messages.tpl debug_messages=$minf.messages}
			</ul>
		</div>
	</div>
</div>
<script type="text/javascript" charset="utf-8">{literal}
	$("ul.buttons li").click(function() {
		var idx = $("ul.buttons li").index(this);
		
		if (idx==3) var items = $("#debugpanelic ul li.dmesg_3, #debugpanelic ul li.dmesg_4");
		else var items = $("#debugpanelic ul li.dmesg_" + idx);
		
		if ($(this).hasClass("passive")) {
			if (items.length<10) items.stop().fadeIn();
			else items.stop().show();
			$(this).removeClass("passive");
		}else{
			if (items.length<10) items.stop().fadeOut();
			else items.stop().hide();
			$(this).addClass("passive");			
		}
	});
	$("body").dblclick(function() {
		var state = $("#debugpanelc").attr("rel");
		if (state=="hide") {
			$("#debugpanelc").stop().animate({top: '0px'}).attr("rel", "show");
		}else{
			$("#debugpanelc").stop().animate({top: '-600px'}).attr("rel", "hide");			
		}
	});
{/literal}</script>